<template>
	<view class="centent">
		<view class="list" v-for="(item,index) in lists">
			<view class="title">
				{{item.title}}
			</view>
			<view class="info">
				<view class="info-left">
					待预展
				</view>
				<!-- <view class="info-right">
					同步拍
				</view> -->
			</view>
			<!-- <view class="num">
				拍品190	
			</view> -->
			<view class="bc" @click="onParticulars(lists[index])">
				<image style="border-radius: 12rpx;width: 350rpx;height: 450rpx;" :src="item.imageUrl"
					mode="aspectFill"></image>
			</view>
			<view class="scroll">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="20">
					<view class="scroll-view-item_H" v-for="(key,indx) in item.auctionList" :key="indx"
						@click="onAuctionInfo(lists[index].auctionList[indx])">
						<view >
							<image  style="width: 220rpx;height: 220rpx;border-radius: 6rpx;" :src="key.imageInfo"
								mode="aspectFill"></image>
							<view class="scroll-f">
								<view class="scroll-title">
									{{key.title}}
								</view>
								<!-- <view class="scroll-price">
									起拍价：{{item.price}}
								</view> -->
						</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[]
			}
		},
		props: {
			infoList: {
				type: Array,
				require: false
			}
		},
		created() {
			this.list()
		},
		methods: {
			list() {
				this.infoList.forEach((element, index) => {
					this.infoList[index].auctionList = this.infoList[index].auctionList.splice(0, 6)
				})
				this.lists = this.infoList
			},
			onParticulars(item) {
				uni.navigateTo({
					url: `/pages/particulars/particulars?item=${encodeURIComponent(JSON.stringify((item)))}`,
				})

			},
			onAuctionInfo(info) {
				uni.navigateTo({
					url: `/pages/particulars/particularsInfoList/particularsInfoList?info=${encodeURIComponent(JSON.stringify(info))}`
				})
			}
		}
		// async mergeList() {
		// let {
		// 	result
		// } = await uniCloud.callFunction({
		// 	name: 'specialDetailsList',
		// 	data: {
		// 		likeState: 2,
		// 	}
		// });
		// console.log(result);
		// if(result){
		// 	this.infoList.forEach((element, index) => {
		// 		element['acutonList'] = []
		// 		result.data.data.forEach((item, indx) => {
		// 			if (element.auctionId === item.auctionId) {
		// 				this.infoList[index].acutonList.push(result.data.data[indx])
		// 			}
		// 		})
		// 	})
		// 	console.log(this.infoList);
		// }
		// },

	}
</script>

<style lang="scss" scoped>
	.centent {

		background-color: #f8f8f8;

		.list {
			margin-bottom: 40rpx;
			padding: 20rpx 40rpx;

			.title {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 34rpx;
			}

			.info {
				height: 60rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.info-left {
					background-color: #4c8ffb;
					color: #d2e2fc;
					padding: 0rpx 6rpx;
				}

				.info-right {
					margin-left: 4rpx;
					background-color: #eee;
					color: #333;
					padding: 0rpx 6rpx;
				}
			}

			.num {
				letter-spacing: 1.5;
				color: #999;
				font-size: 24rpx;
			}

			.bc {
				text-align: center;
			}

			.scroll {
				margin-top: 40rpx;
				height: 220rpx;

				.scroll-view_H {
					padding: 0 20rpx;
					white-space: nowrap;
					width: 100%;

					.scroll-view-item_H {
						padding-bottom: 40rpx;
						margin-right: 20rpx;
						display: inline-block;
						width: 220rpx;
						height: 220rpx;
						position: relative;

						.scroll-f {
							position: absolute;
							bottom: 50rpx;
							margin-left: 10rpx;

							.scroll-title {
								font-size: 22rpx;
								color: #fff;
							}

							.scroll-price {
								font-size: 22rpx;
								color: #fff;
							}
						}

					}
				}

			}
		}
	}
</style>
